<template>
  <div>
    <HeaderTop :enable-shadow="true"/>
    <div>
      <el-row>
        <el-col :span="2">
          <pre> </pre>
        </el-col>
        <el-col :span="14">
          <div class="al-box-shadow-radius al-p-10px al-m-top-20px">
            <AvatarNickname
                    :desc="userinfo.identity"
                    :avatar="this.userinfo.avatar"
                    :nickname="this.userinfo.nickname"/>

            <el-divider class="al-m-top--20px"></el-divider>

            <DescText class="al-m-left-20px" :plain-text="this.appointment"/>
            <ALImage :src="this.appointment.image"
                     class="al-width-50 al-m-20px"></ALImage>

            <el-divider class="al-m-top-20px">

              <!--判断该约拍是否属于本用户发布的-->
              <div v-if="appointment.userId != this.$store.state.storeUserInfo.id">
                <div v-if="this.addedOrder == false">
                  <div v-if="!this.isOrderedByOther">
                    <el-button round plain type="primary"
                               @click="addOrder(appointment.userId, $store.state.storeUserInfo.id, appointment.id, appointment.image)">
                      预约TA
                    </el-button>
                  </div>
                  <div v-else>
                    <el-button round plain type="primary" disabled
                               @click="addOrder(appointment.userId, $store.state.storeUserInfo.id, appointment.id, appointment.image)">
                      已被别人预约啦，下次早点来喔！
                    </el-button>
                  </div>
                </div>

                <div v-else>
                  <el-button round plain type="danger" @click="deleteOrder(order.id)">
                    取消预约
                  </el-button>
                </div>
              </div>

            </el-divider>

          </div>
        </el-col>

        <el-col :span="6">
          <div class="al-m-left-20px">
            <TitleNode title-text="推荐约拍"/>
            <div v-for="(item, index) in newestAppointment" :key="index">
              <div @click="goPage('/appointment/detail/' + item.id)">
                <el-card
                        :body-style="{padding: '0px'}"
                        class="al-m-top-10px">
                  <ALImage :src="item.image"
                           class="al-cursor-pointer"
                           style="height: 150px"
                           fit="cover"></ALImage>
                  <div class="al-flex-container-center-h">
                    {{item.title}}
                  </div>
                </el-card>
              </div>

            </div>
          </div>
        </el-col>
        <el-col :span="2">
          <pre> </pre>
        </el-col>
      </el-row>

    </div>

    <!-- 弹窗提示 -->
    <el-dialog
            title="提示"
            :visible.sync="dialogTip"
            width="30%">
      <div class="al-box-container">
        <ALImage :src="tipImage" class="al-width-50" />
        <div class="al-fontsize-20px">
          请先登录
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" round
                   @click="dialogTip = false">确 定</el-button>
      </span>
    </el-dialog>

    <ALFooter/>
  </div>
</template>

<script>

  import ALFooter from "../../components/public/ALFooter";
  import {LOCAL_BASE_URL, LOCAL_GATEWAY_URL} from "../../util/network/api/base/api-base";
  import {ORDER_ADD, ORDER_DELETE, ORDER_IS_ADDED, ORDER_IS_ORDERED} from "../../util/network/api/order/api-order";
  import ALImage from "../../components/public/ALImage";
  import TitleNode from "../../components/public/TitleNode";
  import AvatarNickname from "../../components/public/AvatarNickname";
  import DescText from "./component/DescText";
  import HeaderTop from "../../components/public/HeaderTop";
  import {request} from "../../util/network/request";
  import {APPOINTMENT_GET_BY_APTID, APPOINTMENT_GET_NEWEST} from "../../util/network/api/appointment/api-appointment";
  import {USER_GET_BY_ID} from "../../util/network/api/user/api-user";
  import ALDialogTip from "../../components/public/ALDialogTip";

  export default {
    name: "AppointmentDetail",
    components: {ALFooter, ALImage, TitleNode, AvatarNickname, DescText, HeaderTop},
    props: {
      aptId: String || Number
    },
    data() {
      return {
        appointment: {},
        userinfo: {},
        newestAppointment: {},
        addedOrder: false,
        isOrderedByOther: false,
        order: {},
        isLogin: this.$store.state.storeIsLogin,
        dialogTip: false,
        tipImage: 'https://alanlee-panda-appointment.oss-cn-shenzhen.aliyuncs.com/images/chahua/undraw_online_chat_d7ek.png'
      }
    },

    mounted() {
      console.log("AppointmentDetail -> isLogin: " + this.isLogin);

      this.getAppointment(this.aptId);

      this.getNewestAppointment();

      this.isOrdered(this.aptId);

    },

    methods: {
      goPage(path) {
        this.gotoPage(path);
      },

      getAppointment(aptId) {
        request({
          url: APPOINTMENT_GET_BY_APTID + aptId,
        }).then(res => {
          // console.log(res);
          this.appointment = res.data.data;

          this.getUserInfo(this.appointment.userId);

          if (this.isLogin){
            this.isAdded(this.appointment.userId, this.$store.state.storeUserInfo.id, this.aptId);
          }

        }).catch(err => {
          console.log(err)
        })
      },

      getNewestAppointment() {
        request({
          url: APPOINTMENT_GET_NEWEST
        }).then(res => {
          // console.log(res);
          this.newestAppointment = res.data.data;
        }).catch(err => {
          console.log(err)
        });
      },

      getUserInfo(uid) {
        request({
          url: USER_GET_BY_ID + uid,
        }).then(res => {
          // console.log(res);
          this.userinfo = res.data.data;
        }).catch(err => {
          console.log(err)
        })
      },


      /**
       * 添加约拍（订单）
       * @param pubUid 发布约拍者的id
       * @param acptUid 接单者的id
       * @param aptId 约拍信息的id
       * @param image
       */
      addOrder(pubUid, acptUid, aptId, image = '') {

        if (this.isLogin){
          let param = {
            pubUid: pubUid,
            acptUid: acptUid,
            aptId: aptId,
            image: image
          };
          console.log(param);
          request({
            url: ORDER_ADD,
            method: 'post',
            data: this.qsParam(param),
          }).then(res => {
            // console.log(res);
            if (res.data.code === 1) {
              this.$message.success("预约成功");
              this.addedOrder = true;
            }
          }).catch(err => {
            console.log(err);
            this.$message.error("预约失败, 请稍候重试");
          })
        }else {
          this.$message.warning("请先登录");
          this.dialogTip = true;
        }
      },


      //判断是否添加过约拍
      isAdded(pub_uid, acpt_uid, apt_id) {
        request({
          url: ORDER_IS_ADDED + `${pub_uid}/${acpt_uid}/${apt_id}`,
        }).then(res => {
          // console.log(res);
          if (res.data.code === 1) {
            this.addedOrder = true;
            this.order = res.data.data;
          } else {
            this.addedOrder = false;
          }
        }).catch(err => {
          console.log(err)
        })
      },

      //判断是否被别人预约了
      isOrdered(aptId){
        request({
            url: ORDER_IS_ORDERED + aptId,
        }).then(res => {
            // console.log(res);
            if (res.data.code == 1){
              // this.$message.warning("已被别人预约，下次早点来喔！");
              this.isOrderedByOther = true;
            }else {
              this.isOrderedByOther = false;
            }
        }).catch(err => {
            console.log(err)
        })
      },

      //取消预约
      deleteOrder(orderId) {
        console.log("取消预约");
        let data = {orderId};
        request({
          url: ORDER_DELETE,
          method: 'post',
          data: this.qsParam(data),
          headers: {}
        }).then(res => {
          console.log(res);
          if (res.data.code === 1){
            this.addedOrder = false;
          }

        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>

<style scoped>

</style>
